<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>张帅锋个人简历</title>
		<link rel="stylesheet" type="text/css" href="iconfont/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="css/resume.css" />
		<link rel="stylesheet" type="text/css" href="css/swiper-3.3.1.min.css" />
	</head>
	<body>
		<header>
			<ul>
				<li>
					<img src="images/logome.jpg" />
					<div>
						<p>张帅锋</p>
						<p>个人简历</p>
					</div>
				</li>
				<li><a href="###">首页</a></li>
				<li><a href="###">随笔</a></li>
				<li><a href="###">积淀</a></li>
				<li><a href="###">关于</a></li>
			</ul>
		</header>
		
		<!--引入swiper结构-->
		
		<div class="swiper-container">
	        <div class="swiper-wrapper">
	            <div class="swiper-slide">
	            	<div class="personal-container">
	            		<div class="personal-pic">
	            			<div>
	            				<img src="images/logome.jpg" />
	            			</div>
	            			<p>生活是一种绵延不绝的渴望,渴望不断上升,变得更伟大而高贵。</p>
	            		</div>
	            		<div class="personal-msg">
	            			<p>我叫张帅锋</p>
	            			<p>24岁</p>
	            			<p>一名前端研发工程师</p>
	            			<p>ai_youman@163.com</p>
	            		</div>
	            	</div>
	            </div>
	            <div class="swiper-slide">
	            	<div class="personal-container">
	            		<div class="personal-aboutme">
	            			<h2>关于我</h2>
	            			<div class="red-line"></div>
	            			<p>&middot;ABOUT ME&middot;</p>
	            		</div>
	            		<ul class="personal-list">
	            			<li>
	            				<div class="icon">
	            					<i class="iconfont icon-xuelirenzheng"></i>
	            				</div>
	            				<div class="personal-message">
	            					<p>学历</p>
	            					<p>本科</p>
	            				</div>
	            			</li>
	            			<li>
	            				<div class="icon">
	            					<i class="iconfont icon-nianling"></i>
	            				</div>
	            				<div class="personal-message">
	            					<p>年龄</p>
	            					<p>24岁</p>
	            				</div>
	            			</li>
	            			<li>
	            				<div class="icon">
	            					<i class="iconfont icon-xiazai20"></i>
	            				</div>
	            				<div class="personal-message">
	            					<p>籍贯</p>
	            					<p>洛阳</p>
	            				</div>
	            			</li>
	            			<li>
	            				<div class="icon">
	            					<i class="iconfont icon-zhuangtai"></i>
	            				</div>
	            				<div class="personal-message">
	            					<p>状态</p>
	            					<p>不在职</p>
	            				</div>
	            			</li>
	            		</ul>
	            		<div class="personal-introduce">
	            			<p>2014年毕业于四川工商学院，现就职于成都兰途网络科技有限公司</p>
							<p>	喜欢优雅的代码</p>
							<p>	AngularJS ReactJs VueJs</p>
							<p>	层出不穷的框架让人兴奋，而不同框架背后的思路却在逐渐统一</p>
							<span class="left"></span>
							<span class="right"></span>
	            		</div>
	            	</div>
	            </div>
	            <div class="swiper-slide">
	            	<div class="personal-container">
	            		<div class="skill-title personal-aboutme">
	            			<h2>专业技能</h2>
	            			<div class="red-line"></div>
	            			<p>&middot;SKILL&middot;</p>
	            		</div>
	            		<p class="personal-understand">前端的学习需要持之以恒，知识深度与广度都很重要。而前端开发的重中之重就是原生javascript的理解，而如今的思路必需有模块化，组件化，工程化</p>
	            		<ul class="personal-module">
	            			<li>
	            				<img src="images/ng.png" />
	            				<p>angular.js</p>
	            				<img src="images/skill_flag.png" />
	            				<div class="module-introduce">
	            					<ul>
	            						<li>熟练运用angularJS处理移动端的模块开发</li>
	            						<li>模块组件化</li>
	            						<li>了解双绑的背后实现</li>
	            						<li>熟练的指令编写</li>
	            					</ul>
	            				</div>
	            			</li>
	            			<li>
	            				<img src="images/html.png" />
	            				<p>html</p>
	            				<img src="images/skill_flag.png" />
	            			</li>
	            			<li>
	            				<img src="images/css.png" />
	            				<p>css</p>
	            				<img src="images/skill_flag.png" />
	            			</li>
	            			<li>
	            				<img src="images/js.png" />
	            				<p>javascript</p>
	            				<img src="images/skill_flag.png" />
	            			</li>
	            		</ul>
	            	</div>
	            </div>
	            <div class="swiper-slide">
	            	<div class="personal-container">
	            		<div class="personal-aboutme">
	            			<h2>我的经历</h2>
	            			<div class="red-line"></div>
	            			<p>&middot;EXPERIENCE&middot;</p>
	            		</div>
	            		<div class="preface">2014年实习期间，开始了web前端自学生涯。</div>
	            		<div class="">
	            			
	            		</div>
	            	</div>
	            </div>
	            <div class="swiper-slide">Slide 5</div>
	            <div class="swiper-slide">Slide 6</div>
	            <!--<div class="swiper-slide">Slide 7</div>
	            <div class="swiper-slide">Slide 8</div>
	            <div class="swiper-slide">Slide 9</div>
	            <div class="swiper-slide">Slide 10</div>-->
	        </div>
	        <!-- Add Pagination -->
	        <div class="swiper-pagination"></div>
	    </div>
		
	    <!--
	      	swiper.js引入
	    -->
		<script type="text/javascript" src="js/swiper-3.3.1.min.js" ></script>
		
		
	    <script type="text/javascript" src="js/jquery.js"></script>
	    <script type="text/javascript" src="js/resume.js"></script>
	</body>
</html>